<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-11 19:09:26
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-11 19:44:54
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点亮灯泡2.0</title>
</head>
<body>
    <img id="light" src="./img/image1.png" alt=""><br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">
    <br>
    <input type="text" id="name" value="BRIUP" onfocus="lower()" onblur="upper()">
    <br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
    <br>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
<script>
    // 点亮 - 熄灭
    function on() {
        // 获取img标签对象
        var img = document.getElementById("light");
        // 然后修改src属性
        img.src = "./img/image2.png";
    }
    function off() {
        var img = document.getElementById("light");
        img.src = "./img/image1.png";
    }

    function lower(){ //小写
        // 获取输入框元素对象
        var input = document.getElementById("name");
        // 将值转为小写
        input.value = input.value.toLowerCase();
    }
    function upper(){ //大写
        // 获取输入框元素对象
        var input = document.getElementById("name");
        // 将值转为大写
        input.value = input.value.toUpperCase();
    }
    
    // 点击"全选"按钮使所有的复选框呈现选中状态;
    // 点击"反选"按钮使所有的复选框选中状态取反;
    function checkAll(){
        // 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");
        // 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }
    }
    function reverse(){
        // 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");
        // 反转其选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            if(element.checked)
            element.checked = false;
            else
            element.checked = true;
        }
    }
</script>
</html>